<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试成功</title>
    <link rel="stylesheet" href="/webjars/element-ui/2.13.1/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    输入模板代码：
    <el-select v-model="templetid" filterable placeholder="请选择">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-button @click.native="sub">确认</el-button>
    <el-table
            :data="tableData"
            border
            stripe
            height="800"
            style="width: 100%">
        <el-table-column v-if="show" prop="templetid" fixed label="模板编号">
        </el-table-column>
        <el-table-column v-if="show" prop="tableid" fixed label="表ID">
        </el-table-column>
        <el-table-column prop="tableName" label="表名称">
        </el-table-column>
        <el-table-column
                prop="fieldcode"
                label="字段编码">
        </el-table-column>
        <el-table-column
                prop="fieldName"
                label="字段中文名">
        </el-table-column>
        <el-table-column  prop="tabindex" label="排序字段">
            <template scope="scope">
                <el-input size="small" v-model="scope.row.tabindex" placeholder="请输入内容" @change="handleEdit(scope.$index,scope.row,scope.column)"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                prop="align"
                label="字段位置(left,center,right)">
            <template scope="scope">
            <el-select v-model="scope.row.align" @change="handleEdit(scope.$index, scope.row,scope.column)" filterable placeholder="请选择">
                <el-option
                        v-for="item in alignData"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                </el-option>
            </template>
        </el-table-column>
        <el-table-column
                prop="editfield"
                label="是否编辑字段('Y','N')">
            <template scope="scope">
                <el-select v-model="scope.row.editfield" @change="handleEdit(scope.$index, scope.row,scope.column)" filterable placeholder="请选择">
                    <el-option
                            v-for="item in flagData"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                prop="isqueryitem"
                label="查询条件是否显示">
            <template scope="scope">
                <el-select v-model="scope.row.isqueryitem" @change="handleEdit(scope.$index, scope.row,scope.column)" filterable placeholder="请选择">
                    <el-option
                            v-for="item in flagData"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                prop="isedit"
                label="是否编辑('Y','N')">
            <template scope="scope">
                <el-select v-model="scope.row.isedit" @change="handleEdit(scope.$index, scope.row,scope.column)" filterable placeholder="请选择">
                    <el-option
                            v-for="item in flagData"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                prop="iseditconfig"
                label="iseditconfig('Y','N','')">
            <template scope="scope">
                <el-select v-model="scope.row.iseditconfig" @change="handleEdit(scope.$index, scope.row,scope.column)" filterable placeholder="请选择">
                    <el-option
                            v-for="item in flagData"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                prop="ishavelink"
                label="是否有链接('Y','N','')">
            <template scope="scope">
                <el-select v-model="scope.row.ishavelink" @change="handleEdit(scope.$index, scope.row,scope.column)" filterable placeholder="请选择">
                    <el-option
                            v-for="item in flagData"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                prop="colspan"
                label="列数">
        </el-table-column>
        <el-table-column
                prop="editevent"
                label="编辑事件">
        </el-table-column>
        <el-table-column
                prop="date"
                label="日期">
        </el-table-column>

    </el-table>
</div>

<script src="/webjars/vue/2.6.11/vue.js"></script>
<script src="/webjars/element-ui/2.13.1/lib/index.js"></script>
<script src="/webjars/axios/0.19.2/dist/axios.js"></script>
<script>

    new Vue({
        el:'#app',
        data:function(){
            return {
                alignData:[{name:"空",value:""},{name:"left",value:"left"},{name:"center",value:"center"},{name:"right",value:"right"}],
                show:false,
                tableData: [],
                templetid:'',
                options:[],
                editfield:'',
                flagData:[{name:"Y",value:"Y"},{name:"N",value:"N"}]
            }
        },
        mounted:function(){
            axios.get('/ext/template/dicTempletId')
                .then(response => {
                    console.log(response.data);
                    this.options = response.data;
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        },
        methods:{
            sub:function(){
                axios.get('/ext/template/show?templetid='+this.templetid)
                    .then(response => {
                            console.log(response.data);
                            this.tableData = response.data;
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            handleEdit(index, row,col) {
                //构建Json对象
                var data = {
                    "fieldcode":row.fieldcode,
                    "tableid":row.tableid,
                    "templetid":row.templetid
                }
                data[col.property] = row[col.property];
                //console.log(row.fieldcode,row.tableid,row.templetid,col.property,data);

                axios.post(`/ext/template/saveTemplate`,data)
                    .then(res=>{
                        console.log('res=>',res);
                    })
            },
        }
    });
</script>
</body>
</html>